<template>
	<div class="footer">
		<div v-for='(item,index) of items' :key="index" :class='[item.cls,{on:index === idx}]' @click="change(item,index)">
			<img :src="index===idx?item.srcSelect:item.src" v-if="showIconOrSrc">
			<i :class="index===idx?item.iconSelect:item.icon" v-if="!showIconOrSrc"></i>
			<span :class="['colorChange',{on:index===idx}]" >{{item.name}}</span>
		</div>
	</div>
</template>
 
<script type="text/javascript">
// eslint-disable-next-line	
/* eslint-disable */
	export default{
		props:{
			idx: {
				type: Number,
				default: 0,
			},
			showIconOrSrc:{
				// true表示显示图片途径 src
				// false 表示icon图标类名
				type: Boolean,
				default: true,
			},
			items: {
				type: Array,
				default: []
			}
		},
		data(){
			return {
			}
		},
		methods: {
			change(item,index) {
				this.$router.push(item.push);
				this.$emit("change",index)
			}
		}
	} 
 
</script>
<style  scoped>
.footer{
	display: flex;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	background: rgb(248, 248, 248);
	width: 100%;
}
div{
	flex: 1;
	padding: 5px;
}
div img{
	width: 30px;
	height: 30px;
}
div span{
	display: block;
	color:black;
	color: rgb(168, 168, 168);
	font-size: 12px;
}
.on{
	color: rgb(25, 137, 250);
}
</style>